<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
    <style>
        .cen {
            width: 70%;
            margin: 0 auto;
            margin-top: 40px;
            text-align: center;
        }
        
        td {
            width: 29%;
        }
        
        .hei {
            height: 56px;
            cursor: pointer;
        }
        
        .hei:hover {
            background-color: #fd7e14;
        }
        
        .upData {
            background-color: #e9ecef;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -160px;
            margin-left: -210px;
            width: 420px;
            height: 320px;
            padding: 20px 20px 0 20px;
            z-index: 200;
            display: none;
        }
        
        .add {
            background-color: #e9ecef;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -160px;
            margin-left: -210px;
            width: 420px;
            height: 320px;
            padding: 20px 20px 0 20px;
            z-index: 200;
            display: none;
        }
        
        .mask {
            background: #000;
            filter: alpha(opacity=50);
            /* IE的透明度 */
            opacity: 0.5;
            /* 透明度 */
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 100;
            /* 此处的图层要大于页面 */
            display: none;
        }
    </style>
</head>

<body>


    <table class="table cen table-hover table-bordered">
        <thead class="thead-light">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">姓名</th>
                <th scope="col">性别</th>
                <th scope="col">编辑</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>
                    <button id="del" type="button" class="btn btn-outline-dark btn-sm">删除</button>
                    <button id="add" type="button" class="btn btn-outline-dark btn-sm">修改</button>
                </td>
            </tr> -->
        </tbody>
        <thead class="thead-light">
            <tr class="hei">
                <td scope="col" colspan="4">添加</td>
            </tr>
        </thead>
    </table>


    <div class="upData">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input type="text" class="form-control" id="exampleInputEmail1" name="uname">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">年龄</label>
                <input type="text" class="form-control" id="exampleInputPassword1" name="age">
            </div>
            <div style="padding: 0;" class="form-group form-check">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sex" id="inlineRadio1" checked value="男">
                    <label class="form-check-label" for="inlineRadio1">男</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sex" id="inlineRadio2" value="女">
                    <label class="form-check-label" for="inlineRadio2">女</label>
                </div>
            </div>
            <button id="submit1" type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    <div class="add">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1_1">姓名</label>
                <input type="text" class="form-control" id="exampleInputEmail1_1" aria-describedby="emailHelp" name="uname">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1_1">年龄</label>
                <input type="text" class="form-control" id="exampleInputPassword1_1" name="age">
            </div>
            <div style="padding: 0;" class="form-group form-check">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sex" id="inlineRadio1_1" value="男" checked>
                    <label class="form-check-label" for="inlineRadio1_1">男</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sex" id="inlineRadio2_1" value="女">
                    <label class="form-check-label" for="inlineRadio2_1">女</label>
                </div>
            </div>
            <button id="submit2" type="submit" class="btn btn-primary">提交</button>
        </form>

    </div>

    <div class="mask"></div>

    <script>
        $(function() {
            $.ajax({
                url: 'http://localhost/user',
                type: 'get',
                success: function(data) {
                    var newData = data.map((v, i) => {
                        return `<tr><th scope="row">${v.id}</th><td>${v.uname}</td><td>${v.sex}</td><td><button  type="button" class="btn btn-outline-dark btn-sm sc">删除</button><button type="button" class="btn btn-outline-dark btn-sm xg">修改</button></td></tr>`
                    })
                    $('tbody').html(newData)

                    fn()
                }
            })

            function fn() {
                //删除
                $('.sc').click(function() {
                    $(this).parent().parent().remove()
                    var id = $(this).parent().siblings('th').text()
                    $.ajax({
                        url: 'http://localhost/del',
                        data: {
                            id: id
                        },
                        type: "post",
                        success: function(data) {
                            console.log(data);
                        }
                    })
                })
                let id = 0
                $('.xg').click(function() {
                    $('.upData').css('display', 'block')
                    $('.mask').css('display', 'block')
                    id = $(this).parent().siblings('th').text()
                })
                $('.hei').click(function() {
                        $('.add').css('display', 'block')
                        $('.mask').css('display', 'block')
                    })
                    //添加
                $('form:eq(1)').on('submit', function(e) {
                    e.preventDefault()
                    var uname = $('#exampleInputEmail1_1').val()
                    var age = $('#exampleInputPassword1_1').val()
                    var sex = $("form:eq(1) [name='sex']:checked").val();
                    $.ajax({
                        url: 'http://localhost/add',
                        data: {
                            uname,
                            age,
                            sex,
                        },
                        type: 'post',
                        success: function(data) {
                            if (data == '插入成功') {
                                window.location.reload()
                            } else {
                                alert('添加失败')
                            }
                        }
                    })
                })

                $('form:eq(0)').on('submit', function(e) {
                    e.preventDefault()
                    var uname = $('#exampleInputEmail1').val()
                    var age = $('#exampleInputPassword1').val()
                    var sex = $("form:eq(0) [name='sex']:checked").val();
                    $.ajax({
                        url: 'http://localhost/upDate',
                        type: 'post',
                        data: {
                            uname: uname,
                            age: age,
                            sex: sex,
                            id: id,
                        },
                        success: function(data) {
                            if (data == '修改成功') {
                                window.location.reload()
                            } else {
                                alert('修改失败')
                            }
                        }

                    })
                })



            }

        })
    </script>
</body>

</html>